<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import {
  Menu as IconMenu,
  Location,
  MapLocation,
  Tools,
  // Star, // 删除不需要的图标
  DataAnalysis,
  User,
  Warning,
  Document,
} from '@element-plus/icons-vue'

const authStore = useAuthStore()
const router = useRouter()

// 侧边栏折叠状态
const isCollapse = ref(false)
const activeIndex = ref('1')
// 当前页面标题
const currentPageTitle = ref('卫生间地图')

// 处理菜单折叠
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 登出方法
const handleLogout = () => {
  authStore.logout(router)
}

// 处理菜单点击
const handleMenuSelect = (index: String) => {
  switch (index) {
    case '1':
      router.push('/dashboard/map')
      currentPageTitle.value = '卫生间地图'
      break
    case '2':
      router.push('/dashboard/route-planning')
      currentPageTitle.value = '最近卫生间路径规划'
      break
    case '3':
      router.push('/dashboard/add-facility')
      currentPageTitle.value = '添加设施'
      break
    // 删除 case '4' 用户评价的路由处理
    case '5':
      router.push('/dashboard/analytics')
      currentPageTitle.value = '数据分析'
      break
    case '7-1':
      router.push('/dashboard/issue-reports')
      currentPageTitle.value = '问题报告'
      break
    case '7-2':
      router.push('/dashboard/maintenance-records')
      currentPageTitle.value = '维修记录'
      break
    default:
      router.push('/dashboard/map')
      currentPageTitle.value = '卫生间地图'
  }
}
</script>

<template>
  <el-container class="dashboard-layout">
    <!-- 侧边栏 -->
    <el-aside width="auto" class="sidebar">
      <div class="logo-container">
        <img src="@/assets/bathroom-logo.svg" alt="Logo" class="logo" v-if="!isCollapse" />
        <span class="title" v-if="!isCollapse">卫生间管理系统</span>
      </div>

      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical"
        :collapse="isCollapse"
        background-color="#1e293b"
        text-color="#fff"
        active-text-color="#42a5f5"
        @select="handleMenuSelect"
      >
        <el-menu-item index="1">
          <el-icon><MapLocation /></el-icon>
          <template #title>卫生间地图</template>
        </el-menu-item>

        <el-menu-item index="2" v-if="authStore.userRole === 'guest'">
          <el-icon><Location /></el-icon>
          <template #title>最近卫生间路径规划</template>
        </el-menu-item>

        <!-- 将子菜单改为直接的菜单项 -->
        <el-menu-item index="3" v-if="authStore.userRole === 'admin'">
          <el-icon><Tools /></el-icon>
          <template #title>设施管理</template>
        </el-menu-item>

        <!-- 删除用户评价菜单项 -->

        <el-menu-item index="5" v-if="authStore.userRole === 'admin'">
          <el-icon><DataAnalysis /></el-icon>
          <template #title>数据分析</template>
        </el-menu-item>

        <el-sub-menu index="7" v-if="authStore.userRole === 'admin'">
          <template #title>
            <el-icon><Warning /></el-icon>
            <span>问题/评论管理</span>
          </template>
          <el-menu-item index="7-1">评论管理</el-menu-item>
          <el-menu-item index="7-2">问题管理</el-menu-item>
        </el-sub-menu>
      </el-menu>

      <div class="collapse-btn" @click="handleCollapse">
        <el-icon>
          <IconMenu />
        </el-icon>
      </div>
    </el-aside>

    <!-- 主内容区 -->
    <el-container class="main-container">
      <!-- 头部 -->
      <el-header class="header">
        <div class="header-content">
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="user-info">
            <span class="welcome">欢迎，{{ authStore.username }}</span>
            <span class="role-badge" :class="authStore.userRole === 'admin' ? 'admin' : 'guest'">
              {{ authStore.userRole === 'admin' ? '管理员' : '游客' }}
            </span>
            <el-button type="danger" size="small" @click="handleLogout">退出登录</el-button>
          </div>
        </div>
      </el-header>

      <!-- 内容区 - 使用 RouterView 给下层子界面 -->
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.dashboard-layout {
  height: 100vh;
  width: 100%;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #1e293b;
  color: white;
  height: 100%;
  position: relative;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 16px;
  height: 64px;
  background-color: #0f172a;
}

.logo {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #42a5f5;
  white-space: nowrap;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

.collapse-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #42a5f5;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.collapse-btn:hover {
  background-color: #1976d2;
}

/* 头部样式 */
.header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.breadcrumb {
  font-size: 14px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome {
  font-size: 14px;
  color: #666;
}

.role-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.role-badge.admin {
  background-color: #1976d2;
}

.role-badge.guest {
  background-color: #66bb6a;
}

/* 主内容区样式 */
.main-container {
  background-color: #f5f7fa;
}

.main-content {
  padding: 20px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}
</style>
